<template>
  <div class="gl_heightFull">
    <div :loading="loading" class="gl_searchBox gl_mb_15 gl_px_15">
      <div>
        <el-button v-if="currentInfo.statusCode == 'Canceled' || currentInfo.statusCode == 'Finished' || !currentInfo.statusCode" :loading="btnLoading" type="success" size="mini" @click="calculatePoint()">计算联赛积分</el-button>
        <el-button v-else :loading="btnLoading" type="success" size="mini" disabled>计算联赛积分</el-button>
        <span class="text gl_pl_15" @click="openRecord">计算记录</span>
      </div>
      <div v-if="currentInfo.statusCode == 'Created' || currentInfo.statusCode == 'Scheduled' || currentInfo.statusCode == 'Running'" class="gl_mt_15">
        <span v-if="currentInfo.statusCode == 'Created' || currentInfo.statusCode == 'Scheduled'">
          等待计算队列中（前方计算计划 <span style="color: #ff4949">{{ currentInfo.taskSort }}</span> 个）
        </span>
        <span v-else>{{ currentInfo.statusName }}</span>
      </div>
    </div>
    <el-tabs v-model="activeName" class="gl_tabs" type="card" @tab-click="handleTabClick">
      <template v-for="item in optList">
        <el-tab-pane :key="item.code" :name="item.code" :label="item.name">
          <component :is="item.component" v-if="item.code === activeName" :league-type="item.code" />
        </el-tab-pane>
      </template>
    </el-tabs>
    <calculationRecord ref="calculationRecord" @refresh="onRefresh" />
  </div>
</template>
<script>
import team from './team/index';
import person from './person/index';
import area from './area/index';
import coach from './coach/index';
import leader from './leader/index';
import calculationRecord from './calculationRecord';
import {
  api_GET_EventsManagementPointTaskInfoCompetitionId, // 获取当前任务信息
  api_GET_EventsManagementPointTaskCalculatePointCompetitionId // 计算积分
} from '@/extend/api/game.js';
export default {
  components: {
    calculationRecord
  },
  data() {
    return {
      activeName: '',
      loading: false,
      btnLoading: false,
      gameId: '',
      currentInfo: {},
      optList: [
        {
          code: 'team',
          name: '团体积分排名',
          component: team
        },
        {
          code: 'person',
          name: '个人积分排名',
          component: person
        },
        {
          code: 'coach',
          name: '教练积分排名',
          component: coach
        },
        {
          code: 'leader',
          name: '领队积分排名',
          component: leader
        },
        {
          code: 'area',
          name: '区域排名',
          component: area
        }
      ]
    };
  },
  created() {
    this.activeName = this.$route.query.leagueType || 'team';
    this.activeName = localStorage.getItem('leagueType') || 'team';
    this.gameId = this.$route.params.parentId;
    this.getCurrentInfo();
  },
  methods: {
    handleTabClick(tabItem) {
      localStorage.setItem('leagueType', tabItem.name);
      const { query } = this.$route;
      this.$router.push({
        name: 'LeagueTable',
        query: query
      });
    },
    // 获取当前状态信息
    getCurrentInfo() {
      var that = this;
      that.loading = true;
      api_GET_EventsManagementPointTaskInfoCompetitionId(that.gameId).then(res => {
        that.loading = false;
        that.currentInfo = res || {};
      }).catch((error) => {
        that.loading = false;
        const _msg = error.error.message || error.message;
        that.$message({ type: 'error', message: _msg || '获取当前任务信息失败！' });
      });
    },
    // 计算积分
    calculatePoint() {
      var that = this;
      that.btnLoading = true;
      api_GET_EventsManagementPointTaskCalculatePointCompetitionId(that.gameId).then(res => {
        that.getCurrentInfo();
        that.btnLoading = false;
        that.$message({ type: 'success', message: '操作成功' });
      }).catch((error) => {
        that.btnLoading = false;
        const _msg = error.error.message || error.message;
        that.$message({ type: 'error', message: _msg || '计算失败！' });
      });
    },
    // 打开记录
    openRecord() {
      this.$refs.calculationRecord.open(this.gameId);
    },
    onRefresh() {
      this.getCurrentInfo();
    }
  }
};
</script>

<style scoped>
.text {
  cursor: pointer;
  color: #1890ff;
}
.text:hover {
  text-decoration: underline;
}
</style>
